import { isNullable } from '@utils/nullFunc'
import { isBrowser } from '@utils/environment'
type logColorMap = {
  info: '#909399' | string
  error: '#F56C6C' | string
  warning: '#E6A23C' | string
  success: '#67C23A' | string
}
const _isEmpty = (value: unknown) => {
  return isNullable(value) || value === ''
}
/*
console.log() 可以接受任何类型的参数，包括字符串、数字、布尔值、对象、数组、函数等。
常用的占位符：
%s - 字符串
%d or %i - 整数
%f - 浮点数
%o - 对象
%c - CSS 样式
*/

/**
 * @description 格式化输出信息到控制台。该函数通过设置不同的背景色和边框样式，为控制台输出的文字添加视觉上的区分。主要用于在调试过程中输出带有标题和主体内容的提示信息，通过可选的参数color自定义颜色。
 * @param title 输出信息的标题，默认为空字符串。
 * @param text 输出信息的主体内容，默认为空字符串。
 * @param color 输出信息的背景色和边框颜色，默认为灰色(#dddddd).
 *
 * 参考：{@link https://juejin.cn/post/7371716384847364147}
 */
const prettyPrint = (title = '', text = '', color = '#dddddd') => {
  console.log(
    `%c ${title} %c ${text} %c`,
    `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
    `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
    'background:transparent'
  )
}

/**
 * 创建一个用于输出美化日志的类。
 * 该类提供了一系列方法用于在开发环境中输出不同类型的日志（信息、错误、警告、成功），
 * 并且支持在日志中输出图片和表格。在生产环境中，日志输出被抑制。
 *
 * 参考：{@link https://juejin.cn/post/7371716384847364147}
 */
class createPrettyLog {
  private isOnlyDev: boolean
  /**
   * 构造函数。
   * @param {Object} options - 构造函数的配置选项。
   * @param {boolean} options.isOnlyDev - 是否仅在开发环境中输出日志，默认为 true。
   */
  constructor(options: { isOnlyDev: boolean } = { isOnlyDev: true }) {
    this.isOnlyDev = options.isOnlyDev
  }
  static logColorMap: logColorMap = {
    info: '#909399',
    error: '#F56C6C',
    warning: '#E6A23C',
    success: '#67C23A'
  }

  static isProduction = () => {
    let result = false
    try {
      // @ts-ignore
      const mode =
        (typeof import.meta !== 'undefined' &&
          'env' in import.meta &&
          import.meta.env.MODE) ||
        (typeof process !== 'undefined' &&
          'env' in process &&
          process.env.NODE_ENV) ||
        'development'
      if (typeof mode === 'string' && mode === 'production') {
        result = true
      }
    } catch (error) {
      result = false
    }
    return result
  }

  private _isContinue() {
    return this.isOnlyDev && !createPrettyLog.isProduction()
  }
  /**
   * @description 基础信息打印
   * @param textOrTitle - 标题或者内容
   * @param content - 内容
   */
  info(textOrTitle = '', content = ''): createPrettyLog {
    const _this = this
    if (!this._isContinue()) return _this
    const title = _isEmpty(content as string) ? 'Info' : textOrTitle
    const text = _isEmpty(content) ? textOrTitle : content
    prettyPrint(title, text, createPrettyLog.logColorMap.info)
    return _this
  }

  error(textOrTitle: string, content = ''): createPrettyLog {
    const _this = this
    if (!this._isContinue()) return _this
    const title = _isEmpty(content) ? 'Error' : textOrTitle
    const text = _isEmpty(content) ? textOrTitle : content
    prettyPrint(title, text, createPrettyLog.logColorMap.error)
    return _this
  }
  warning(textOrTitle: string, content = ''): createPrettyLog {
    const _this = this
    if (!this._isContinue()) return _this
    const title = _isEmpty(content) ? 'Warning' : textOrTitle
    const text = _isEmpty(content) ? textOrTitle : content
    prettyPrint(title, text, createPrettyLog.logColorMap.warning)
    return _this
  }
  success(textOrTitle: string, content = ''): createPrettyLog {
    const _this = this
    if (!this._isContinue()) return _this
    const title = _isEmpty(content) ? 'Success ' : textOrTitle
    const text = _isEmpty(content) ? textOrTitle : content
    prettyPrint(title, text, createPrettyLog.logColorMap.success)
    return _this
  }

  /**
   *
   * @param url 图片地址【注意，url如果是网络图片必须开启了跨域访问才能打印】 | base64
   * @param {number} scale
   * @returns {createPrettyLog}
   */
  image(url: string, scale: number = 0.15): createPrettyLog {
    if (!isBrowser || !window.Image) {
      logger.warning(`logger.image() is not supported in this environment.`)
      return this
    }
    const img = new Image()
    img.crossOrigin = 'anonymous'
    img.onload = () => {
      const c = document.createElement('canvas')
      const ctx = c.getContext('2d')
      if (ctx) {
        c.width = img.width
        c.height = img.height
        ctx.fillStyle = 'red'
        ctx.fillRect(0, 0, c.width, c.height)
        ctx.drawImage(img, 0, 0)
        const dataUri = c.toDataURL('image/png')
        console.log(
          `%c sup?`,
          `
          font-size: 1px;
          padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
          background-image: url(${dataUri});
          background-repeat: no-repeat;
          background-size: ${img.width * scale}px ${img.height * scale}px;
          color: transparent;
        `
        )
      }
    }
    img.src = url
    return this
  }
  table(...args: any[]) {
    console.table(args)
  }
}
const logger = new createPrettyLog()

export { logger, createPrettyLog, prettyPrint }
